<template>
    <section>
        <div class="app-container">
            <div class="header">
                当前订单状态：待付定金
            </div>
            <div class="filter-container">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">订单金额</div>
                    <el-row class="common">
                        <el-col :span="8">商品总金额：{{detailInfo.amount|Currency}}</el-col>
                        <el-col :span="8">总优惠：{{detailInfo.discountAmount|Currency}}</el-col>
                        <el-col :span="8">总运费：{{detailInfo.postAmount|Currency}}</el-col>
                    </el-row>
                    <el-row class="common">
                        <template v-if="detailInfo.type == 2">
                            <el-col :span="8" v-if="detailInfo.status">待付定金：{{detailInfo.deposit|Currency}}</el-col>
                            <el-col :span="8" v-else>实付定金：{{detailInfo.deposit|Currency}}</el-col>
                            <el-col :span="8" v-if="detailInfo.status">待付尾款：{{detailInfo.balance|Currency}}</el-col>
                            <el-col :span="8" v-else>实付尾款：{{detailInfo.balance|Currency}}</el-col>
                        </template>
                        <el-col :span="8">实付金额：{{detailInfo.payAmount|Currency}}</el-col>
                    </el-row>
                </el-card>
            </div>
            <div class="filter-container">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">订单信息</div>
                    <el-row class="common">
                        <el-col :span="8">订单号：{{detailInfo.on}}</el-col>
                        <el-col :span="8">订单状态：待付定金</el-col>
                        <el-col :span="8">订单类型：<template v-if="detailInfo.type == 1">普通订单</template><template v-else>团购订单</template></el-col>
                    </el-row>
                    <el-row class="common">
                        <el-col :span="8">下单时间：2019-01-10 23:09:08</el-col>
                        <el-col :span="8">付款时间：{{detailInfo.payTime}}</el-col>
                        <el-col :span="8">发票类型：我是发票</el-col>
                    </el-row>
                    <el-row class="common">
                        <el-col :span="8">支付方式：
                            <template v-if="detailInfo.payType == 1">支付宝</template>
                            <template v-if="detailInfo.payType == 2">微信</template>
                            <template v-if="detailInfo.payType == 3">公对公</template>
                        </el-col>
                        <el-col :span="8">支付流水号：0029809750</el-col>
                    </el-row>
                </el-card>
            </div>
            <div class="filter-container">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">商品信息</div>
                    <elTable ref="t" :formData="formData" @tableData="getOrderInfo">
                        <el-table-column v-for="item in tableFields"
                                         :prop="item.prop"
                                         :label="item.label"
                                         align="center"
                                         :show-overflow-tooltip="true">
                        </el-table-column>
                    </elTable>
                </el-card>
            </div>
            <div class="filter-container">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">收货人信息</div>
                    <el-row class="common">
                        <el-col :span="8">收货人：{{detailInfo.orderReceiver.contacts}}</el-col>
                        <el-col :span="8">收货人手机号：{{detailInfo.orderReceiver.phone}}</el-col>
                        <el-col :span="8">终端客户名称：{{title}}</el-col>
                    </el-row>
                    <el-row class="common">
                        <el-col :span="8">收货地址：浙江省杭州市西湖区紫金街道天目路127号</el-col>
                    </el-row>
                </el-card>
            </div>
            <div class="filter-container">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">优惠信息</div>
                    <el-row class="common">
                        <el-col :span="8">总优惠：{{detailInfo.discountAmount|Currency}}</el-col>
                        <el-col :span="8">优惠券：</el-col>
                        <el-col :span="8">红包：</el-col>
                    </el-row>
                </el-card>
            </div>
        </div>
    </section>
</template>

<script>
    import elTable from "@/components/xForm/elTable"
    import apisOrder from '@/api/orders/orders'
    export default {
        name: 'orderDetails',
        data() {
            return {
                id: '',//订单id
                title: '',//终端客户名
                tableFields: [
                    {label: '商品名称', prop: 'name'},
                    {label: '规格', prop: 'name'},
                    {label: '批准文号', prop: 'name'},
                    {label: '生产厂商', prop: 'name'},
                    {label: '采购价', prop: 'name'},
                    {label: '成交价', prop: 'name'},
                    {label: '采购数量', prop: 'name'},
                    {label: '实际发货数量', prop: 'name'},
                    {label: '小计', prop: 'name'},
                ],
                formData: {
                    currentPage: 1,
                    pageSize: 10
                },
                detailInfo: null,//订单详情
            }
        },
        components: { elTable },
        created() {
            this.id = this.$route.params.id
            this.title = this.$route.params.title
        },
        methods: {
            getOrderInfo() {
                apisOrder.getOrderDetails({id:this.id}).then(res=>{
                    this.detailInfo = res.data
                    this.$refs.t.loadData(this.detailInfo.shoppingCarts, this.detailInfo.total)//商品信息  这里缺个total 需要让后台返回
                })
            }
        }
    }
</script>

<style scoped>
    .header{height: 36px;color: #fb3a5e;font-size: 14px;line-height: 36px;margin-bottom: 10px;padding: 0 8px;background: #F5F5F5;}
    .clearfix{font-size: 15px;font-weight: 600;}
    .common{font-size: 14px;color: #606266;margin-bottom: 10px;}
</style>
